{% extends 'base.html' %}
{% block title %}
{% endblock %}

{% block head %}
{% endblock %}

{% block body %}
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a id="allTab" class="nav-link active" onclick="showTab('all')">全部</a>
        </li>
        <li class="nav-item">
            <a id="violenceTab" class="nav-link" onclick="showTab('violence')">歧视</a>
        </li>
        <li class="nav-item">
            <a id="sarcasmTab" class="nav-link" onclick="showTab('sarcasm')">讽刺</a>
        </li>
        <li class="nav-item">
            <a id="didTab" class="nav-link" onclick="showTab('did')">综合</a>
        </li>
    </ul>

    <div id="all" class="tab-content" style="display: none;">
    </div>

    <div id="violence" class="tab-content" style="display: none;">
    </div>

    <div id="sarcasm" class="tab-content" style="display: none;">
    </div>

    <div id="did" class="tab-content" style="display: none;">
    </div>

{% endblock %}

{% block js %}
    <script>
        window.onload = function () {
            // 显示全部内容
            showTab('all');
        }

        function showTab(tabName) {
            // 移除所有选项卡的活动状态
            const tabLinks = document.querySelectorAll('.nav-link');
            tabLinks.forEach(function (link) {
                link.classList.remove('active');
            });

            // 将当前选项卡设置为活动状态
            var currentTab = document.getElementById(tabName + 'Tab');
            if (!currentTab) {
                console.error('Element with ID "' + tabName + 'Tab" not found');
                return;
            }
            currentTab.classList.add('active');

            // 隐藏所有tab内容
            var tabContents = document.getElementsByClassName('tab-content');
            for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].style.display = 'none';
            }
            // 显示指定tab内容
            document.getElementById(tabName).style.display = 'block';

            // 发送AJAX请求
            if (tabName) {
                fetch('/alert/' + tabName.toLowerCase())
                    .then(response => response.json())
                    .then(data => renderData(tabName, data))
                    .catch(error => console.error('Error:', error));
            }
        }

        function renderData(tabName, data) {
            var tabContent = document.getElementById(tabName.toLowerCase());
            tabContent.innerHTML = ''; // 清空内容

            var videos = data.data.videos;

            // 创建表格
            var table = document.createElement('table');
            table.classList.add('table'); // 添加 Bootstrap 表格类

            // 创建表头
            var tableHeader = document.createElement('thead');
            var headerRow = document.createElement('tr');
            var aidHeader = document.createElement('th');
            aidHeader.textContent = "aid";
            var bvidHeader = document.createElement('th');
            bvidHeader.textContent = "bvid";
            var tnameHeader = document.createElement('th');
            tnameHeader.textContent = "类别";
            var videoNameHeader = document.createElement('th');
            videoNameHeader.textContent = "视频名称";
            var alertRateHeader = document.createElement('th');
            alertRateHeader.textContent = "报警阈值";
            var alertStandardHeader = document.createElement('th');
            alertStandardHeader.textContent = "触发机制";
            headerRow.appendChild(aidHeader);
            headerRow.appendChild(bvidHeader);
            headerRow.appendChild(tnameHeader);
            headerRow.appendChild(videoNameHeader);
            headerRow.appendChild(alertRateHeader);
            headerRow.appendChild(alertStandardHeader);
            tableHeader.appendChild(headerRow);
            table.appendChild(tableHeader);

            // 创建表格内容
            var tableBody = document.createElement('tbody');
            videos.forEach(function (video) {
                var row = document.createElement('tr');

                var alertRateCell = document.createElement('td');
                var alertRateInput = document.createElement('input');
                alertRateInput.classList.add('form-control');
                alertRateInput.type = "text";
                alertRateInput.value = video.alert_rate;
                alertRateInput.addEventListener('change', function () {
                    // 获取视频的 ID
                    var video_bvid = video.bvid;
                    var alert_rate = alertRateInput.value;

                    // 构建要发送的数据对象
                    var data = {
                        video_bvid: video_bvid,
                        alert_rate: alert_rate
                    };

                    // 发送 AJAX 请求
                    $.ajax({
                        type: 'POST',
                        url: '/alert/change',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (response) {
                            // 请求成功，可以在这里处理返回的数据
                            console.log(response);
                            alert('修改成功')
                        },
                        error: function (xhr, status, error) {
                            // 请求失败，处理错误
                            console.error('Request failed. Status: ' + status);
                        }
                    });
                });
                alertRateCell.appendChild(alertRateInput);

                var alertStandardCell = document.createElement('td');
                var alertStandardSelect = document.createElement('select');
                alertStandardSelect.classList.add('form-control');
                var option0 = document.createElement('option');
                option0.value = "0";
                option0.textContent = "歧视言论";
                var option1 = document.createElement('option');
                option1.value = "1";
                option1.textContent = "嘲讽言论";
                var option2 = document.createElement('option');
                option2.value = "2";
                option2.textContent = "综合";
                alertStandardSelect.appendChild(option0);
                alertStandardSelect.appendChild(option1);
                alertStandardSelect.appendChild(option2);
                alertStandardSelect.value = video.alert_standard;
                alertStandardSelect.addEventListener('change', function () {
                    // 获取视频的 ID
                    var video_bvid = video.bvid;

                    // 获取修改后的标准
                    var alert_standard = alertStandardSelect.value;

                    // 构建要发送的数据对象
                    var data = {
                        video_bvid: video_bvid,
                        alert_standard: alert_standard
                    };

                    // 发送 AJAX 请求
                    $.ajax({
                        type: 'POST',
                        url: '/alert/change',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (response) {
                            // 请求成功，可以在这里处理返回的数据
                            console.log(response);
                            alert('修改成功')

                        },
                        error: function (xhr, status, error) {
                            // 请求失败，处理错误
                            console.error('Request failed. Status: ' + status);
                        }
                    });
                });

                alertStandardCell.appendChild(alertStandardSelect);

                var aidCell = document.createElement('td');
                aidCell.textContent = video.aid;

                var bvidCell = document.createElement('td');
                bvidCell.textContent = video.bvid;

                var tnameCell = document.createElement('td');
                tnameCell.textContent = video.tname;

                var videoNameCell = document.createElement('td');
                videoNameCell.textContent = video.video_name;
                videoNameCell.addEventListener('click', function () {
                    window.location.href = 'http://127.0.0.1:5000/alert_detail/' + video.bvid;
                });

                row.appendChild(aidCell);
                row.appendChild(bvidCell);
                row.appendChild(tnameCell);
                row.appendChild(videoNameCell);
                row.appendChild(alertRateCell);
                row.appendChild(alertStandardCell);
                tableBody.appendChild(row);
            });
            table.appendChild(tableBody);
            tabContent.appendChild(table);
        }


    </script>
{% endblock %}